<template>
  <view :style="{ height: height + 'px' }">
    <BaseChart :options="options" />
  </view>
</template>

<script setup>
import BaseChart from '@/components/BaseChart.vue'
// #ifdef MP
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
// #endif

const props = defineProps({
  height: {
    type: Number,
    default: 300,
  },
  data: {
    type: Array,
    default: () => {
      return []
    },
  },
  axisData: {
    type: Array,
    default: () => {
      return []
    },
  },
})

const options = ref({
  xAxis: {
    type: 'category',
    data: props.axisData,
    axisLabel: {
      interval: 0,
      rotate: 45,
    },
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' },
        ]),
        borderRadius: [100, 100, 100, 100],
      },
      barMaxWidth: 20,
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' },
          ]),
        },
      },
      data: props.data,
    },
  ],
})
</script>

<style lang="scss" scoped></style>
